<template>
  <div class="container-page-examine-audio">
    <div class="item-tab-nav">
      <div class="tab-title">合辑</div>
      <div v-for="(temp,index) in tabs" :key="index" :class="['tab-item', index===nowCheck&&'active']" @click="switchTab(index,temp)">
        {{ temp.name }} ({{ temp.count }})
      </div>
    </div>
    <div class="grout-examine-list">
      <div v-if="tabLoading" class="item-tab-loading"><i class="el-icon-loading" />&nbsp;&nbsp;加载中...</div>
      <template v-else>
        <template v-if="nowShowList && nowShowList.length>0">
          <itemListArchive :list="nowShowList" @delete="archiveDeleteHandler" />
          <el-pagination class="item-pagination" prev-text="上一页" next-text="下一页" layout="total, prev, pager, next" :current-page="page" :page-size="size" :total="totalCount" :hide-on-single-page="true" @current-change="currentChangeHandler" />
        </template>
        <itemNoData v-else text="还没有需要审核的音频合辑" />
      </template>
    </div>
  </div>
</template>

<script>
// api
import { getArchiveList } from '@/api/mivawork/audio.js';
// item
import itemListArchive from '@/views/miva-member/upload-manager/components/examine-audio.vue';
import itemNoData from '@/views/miva-member/upload-manager/components/nodata.vue';

export default {
  components: {
    itemListArchive,
    itemNoData
  },
  data() {
    return {
      tabLoading: true,
      totalCount: 0,
      nowShowList: [],
      page: 1,
      size: 5,
      nowCheck: 0,
      tabs: [{ name: '待审核', count: 0, list: null, load: false }]
    };
  },
  async mounted() {
    await this.getArchiveListExamine();
    this.tabLoading = false;
  },
  methods: {
    async getArchiveListExamine() {
      const { data } = await getArchiveList({ state: 1, page: this.page, size: this.size });
      this.totalCount = data.examineDoingCount;
      this.tabs[this.nowCheck].count = data.examineDoingCount;
      this.tabs[this.nowCheck].load = true;
      this.nowShowList = data.archives.map(v => {
        this.$set(v, 'isSetting', 0); // 操作码 0未操作 1
        return v;
      });
    },
    async currentChangeHandler(page) {
      this.page = page;
      this.tabs[this.nowCheck].load = false;
      this.getArchiveListExamine();
    },
    async switchTab(index, temp) {
      console.log(index, temp);
    },
    async archiveDeleteHandler() {
      this.tabs[this.nowCheck].load = false;
      await this.getArchiveListExamine();
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.container-page-examine-audio {
  width: 740px;
  min-height: 100%;
  margin: auto;
  position: relative;
    .item-tab-nav {
    display: flex;
    align-items: flex-end;
    margin-bottom: 20px;
    .tab-title {
      font-size: 24px;
    }
    .tab-item {
      margin: 0 20px;
      padding-bottom: 5px;
      font-size: 12px;
      position: relative;
      border-bottom: 1px solid transparent;
      &.active {
        border-color: $menuActiveText;
        color: $menuActiveText;
        &::after {
          content: '';
          display: block;
          width: 0;
          height: 0;
          position: absolute;
          bottom: -1px;
          left: 50%;
          transform: translateX(-50%);
          border: 3px solid;
          border-color: transparent transparent $menuActiveText transparent;
        }
      }
    }
  }
  .grout-examine-list {
    min-height: 800px;
    position: relative;
    padding-bottom: 50px;
    .item-tab-loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .item-pagination {
      width: 100%;
      position: absolute;
      bottom: 0;
    }
  }
}
</style>
